<template>
	<div class="work-time-container">
		<div class="work-time-container-t">
			<span class="border"></span>
			<span class="work-text">工作指标</span>
		</div>
		<div class="work-time-container-b">
			<div class="item">
				<div class="point-unit">
					<span class="num">{{ toDoCountList.alReadyCount || 0 }}</span
					><span class="unit">件</span>
				</div>
				<div class="day">今日已办</div>
			</div>
			<div class="item">
				<div class="point-unit">
					<span class="num">{{ toDoCountList.handleCount || 0 }}</span
					><span class="unit">件</span>
				</div>
				<div class="day">今日办结事件单</div>
			</div>
			<div class="item">
				<div class="point-unit">
					<span class="num">{{ toDoCountList.monthlyCount || 0 }}</span
					><span class="unit">件</span>
				</div>
				<div class="day">近三十天办结事件单</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
defineProps({
	toDoCountList: {
		type: Object,
		default: () => {},
	},
});
</script>
<style lang="scss" scoped>
.work-time-container {
	width: 100%;
	margin-top: 5px;
	background-color: #fff;

	.work-time-container-t {
		display: flex;
		padding: 10px 15px;
	}

	.border {
		display: inline-block;
		width: 6px;
		height: 20px;
		margin-right: 10px;
		text-align: center;
		background: linear-gradient(180deg, var(--el-color-primary) 0%, #409eff 100%);
		border-radius: 20px;
	}

	.work-text {
		font-size: 16px;
		font-weight: 700;
		color: #000;
	}

	.work-time-container-b {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 5px;
		// background-color: #fff;
		// box-shadow: 0 1px 5px 0 #00000029;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: calc(33% - 1px);
			height: 75px;
			cursor: pointer;
			background: #fff;
			border-radius: 4px;
			box-shadow: 0 3px 8px #00000029;

			.point-unit {
				display: flex;
				align-items: flex-end;
				justify-content: center;
				margin-bottom: 10px;
			}

			.num {
				font-family: D-DIN;
				font-size: 28px;
				font-weight: 700;
				line-height: 28px;
				color: #1989fa;
				text-align: right;
			}

			.unit {
				margin-bottom: 4px;
				margin-left: 4px;
				font-family: 'Microsoft YaHei';
				font-size: 14px;
				font-weight: 400;
				line-height: 14px;
				color: #303133;
				text-align: center;
			}

			.day {
				font-family: 'Microsoft YaHei';
				font-size: 12px;
				font-weight: 400;
				line-height: 14px;
				color: #303133;
				text-align: center;
			}
		}
	}
}
</style>
